import {createRouter, createWebHashHistory} from 'vue-router'
import NProgress from 'nprogress'
// 获取状态管理的token
import {useUserStore} from '@/stores/users.js'
import {useMenuTabStore} from '@/stores/menuTab.js'
import Layout from "@/layout/Index.vue";
import PageMain from "@/layout/components/PageMain.vue";
import settings from '@/settings.js'
// 显示右上角螺旋加载提示
NProgress.configure({showSpinner: true})


const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: Layout
    },
    {
      path: '/login',
      name: 'Login',
      meta: {title: "login"},
      component: () => import('@/views/Login.vue')
    }
  ]
})

const router404 = {
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('@/views/error/NotFound.vue')
}

router.beforeEach(async (to) => {
  //开启进度条
  NProgress.start()
  const userStore = useUserStore();
  // 如果当前是登录状态，用户访问又是登录，属于无用操作，应该跳转到首页去
  if (to.path === '/login') {
    if (userStore.isLogin) {
      return {name: "Home"}
    }
    return true;
  }

  // 判断是否登录
  if (!userStore.isLogin && to.name !== 'Login') {
    // 这里的query就是为了记录用户最后一次访问的路径，这个路径是通过to的参数获取
    // 后续在登录成功以后，就可以根据这个path的参数，然后调整到你最后一次访问的路径
    return {name: 'Login', query: {"path": to.path}}
  }

  // 动态加载路由---这里需要耗时---db--ajax-
  addDynamic()
  // 如果刷新出现空白的问题，那么就使用下面这行代码
  if (!to.name && hasRoute(to)) {
    return {...to};
  }

  // 如果访问的是首页，就跳转到/dashboard页面
  if (to.path === "/") {
    // 读取默认菜单的默认页面,需要从数据库的菜单表中去读取
    return settings.defaultPage;
  }
  // 查询是否注册
  return true
})

// 动态路由
function addDynamic() {
  const userStore = useUserStore();
  // 404可以这样处理
  router.addRoute(router404)
  router.addRoute("Home",{
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/Index.vue')
  })
  // 必须服务器返回的菜单和views去碰撞形成一个完整的route信息，然后注册到home下
  if (userStore.menuTree && userStore.menuTree.length > 0) {
    addDynamicRoutes(userStore.menuTree)
  }
}

// 这里是获取工程目录下的views下的所以的.vue结尾的SPA页面
const modules = import.meta.glob('../views/**/*.vue');
function addDynamicRoutes(menuTreeData, parent) {
  // 开始循环遍历菜单信息
  menuTreeData.forEach((item, index) => {
    // 准备路由数据格式
    const route = {
      path: item.path,
      name: item.name,
      // 增加访问路径的元数据信息
      meta: {name: item.name, icon: item.icon},
      children: []
    }
    // 如果存在parent,就说明有children
    if (parent) {
      if (item.parentId !== 0) {
        // 这里就开始给子菜单匹配views下面的页面spa
        const compParr = item.path.replace("/", "").split("/");
        const l = compParr.length - 1;
        const compPath = compParr
            .map((v, i) => {
              return i === l ? v.replace(/\w/, (L) => L.toUpperCase()) + ".vue" : v;
            })
            .join("/");
        route.path = compParr[l];
        // 设置动态组件
        route.component = modules[`../views/${compPath}`];
        parent.children.push(route);
      }
    } else {
      // 判断你是否有children
      if (item.children && item.children.length > 0) {
        // 这里的含义是：把匹配到菜单数据第一项作为首页的入口页面
        // /order-----redirect-----/order/list
        route.redirect = item.children[0].path;
        route.component = PageMain;
        // 递归
        addDynamicRoutes(item.children, route)
      } else {
        route.component = modules[`../views/${item.name.toLowerCase()}/Index.vue`]
      }
      router.addRoute("Home", route);
    }
  })
}

// 判断当前路由是否存在动态添加的路由数据中
function hasRoute(to) {
  const item = router.getRoutes().find((item) => item.path === to.path);
  return !!item;
}

router.afterEach((to) => {
  // 获取菜单tab的状态信息
  if (to.name != 'NotFound'
      && to.name != 'Login'
      && to.name != 'Home'
      && to.name != 'Permission'
  ) {
    const menuTabStore = useMenuTabStore();
    menuTabStore.addMenuTab(to);
  }
  //完成进度条
  NProgress.done()
})



export default router
